<template>
  <div class="user-card__wrap">
    <div class="right__user-item" >
      <yun-avatar size="48px" border-r="24px" :userId="userId" :src="userAvatar" :name="nickName"></yun-avatar>
      <div class="right__user-item__content">
        <div class="content">
          <p @click="changeRoute2('/u/'+userId+'/blog')">{{nickName}}</p>
          <h6>人气{{statistics.visitedNum}}·粉丝{{statistics.fansNum}}</h6>
        </div>
        <div v-if="userId!==$store.state.userProfile.userId&&followedUser" class="follow1" @click="dataPostToCancelFollow">
          <yun-icon name="loading" v-if="followLoading"></yun-icon><yun-icon v-if="!followLoading" name="right"></yun-icon>已关注
        </div>
        <div v-if="userId!==$store.state.userProfile.userId&&!followedUser" class="follow2" @click="dataPostToFollow">
          <yun-icon name="loading" v-if="followLoading"></yun-icon><span v-if="!followLoading">+</span>关注
        </div>
      </div>
    </div>
  </div>
</template>


<script>

  import config from '../../action/config';
  export default {
    name:'userCard2',
    data(){
      return{
        userAvatar:'',
        userId:'',
        nickName:'',
        gender:0,
        signature:'',
        projectNum:6,
        blogNum:6,
        answerNum:6,
        popularity:6,
        follow:7,
        fans:7,
        statistics:{},
        followLoading:false,
        followedUser:false,
      }
    },
    props:{
      id:{
        type:String,
        default:'',
      },
      info:{
        type:Object,
        default: ()=>({})
      }
    },

    created(){
      if(this.id){
        this.dataGetUserInfo();
      }else{
        this.dataGet2UserInfo();
      }
    },

    computed:{
      from(){
        if(this.userId===this.$store.state.userProfile.userId){
          return 'my'
        }else{
          return  ''
        }
      }
    },
    watch:{
      info(val){
        this.dataGet2UserInfo()
      },
      id(val){
        this.dataGetUserInfo()
      }
    },
    methods:{


      changeRoute2(r){
        let routeUrl = this.$router.resolve({
          path: r
        });
        window.open(routeUrl.href,'_blank')
      },
      dataGetUserInfo(){
        this.followLoading=true;
        this.$axios.$get(config.api.get.User.otherInfo+this.id+'/baseinfo').then((response) => {
          if(response.code===0){
            let data = response.data;
            this.userId = response.userId;
            this.nickName=data.nickName;
            this.gender= data.gender;
            this.signature = data.signature;
            this.userAvatar = data.userAvatar;
            this.statistics = data.statistics || {};
            this.followLoading=false;
            this.followedUser = data.followedUser;
          }
        })
      },
      dataGet2UserInfo(){
        let data = this.info;
        this.nickName=data.userNick;
        this.userId = data.userId;
        this.gender= data.gender;
        this.signature = data.signature;
        this.userAvatar = data.userAvatar;
        this.statistics = data.statistics || {};
        this.followLoading=false;
        this.followedUser = data.followedUser;
      },

      dataPostToFollow(){
        this.followLoading=true;

        this.$axios.$post(config.api.post.User.follow+this.userId+'/follower').then((response)=>{
          if(response.code===0){
            this.$message({
              type:'success',
              message:response.msg
            })
            this.followedUser = true;
          }else{
            this.$message({
              type:'info',
              message:'请在登陆后操作'
            })
          }
          this.followLoading=false;

        })
      },

      dataPostToCancelFollow(){
        this.followLoading=true;

        this.$axios.$delete(config.api.delete.User.unfollow+this.userId+'/follower').then((response)=>{
          if(response.code===0){
            this.$message({
              type:'success',
              message:response.msg
            })
            this.followedUser = false;

          }else{
            this.$message({
              type:'info',
              message:'请在登陆后操作'
            })
          }
          this.followLoading=false;

        })
      },

      dataPostToBlack(){
        this.$axios.$post(config.api.post.User.shielding+this.userId).then((response)=>{
          if(response.code===0){
            this.$message({
              type:'success',
              message:response.msg
            })
          }else{
            this.$message({
              type:'warning',
              message:response.msg
            })
          }
        })
      },

      dataPostToCancelBlack(){
        this.$axios.$delete(config.api.post.User.shielding+this.userId).then((response)=>{
          if(response.code===0){
            this.$message({
              type:'success',
              message:response.msg
            })
          }else{
            this.$message({
              type:'warning',
              message:response.msg
            })
          }
        })
      },
    },
  }
</script>


<style lang="scss" scoped>
  .user-card__wrap{
    width:302*$length;
    .right__user-item{
      padding:8*$length 16*$length;
      width:302*$length;
      height:64*$length;
      box-sizing: border-box;
      @extend %flex-row-spb;
      justify-content: flex-start;
      .right__user-item__content{
        margin-left:10*$length;
        width:210*$length;
        @extend %flex-row-spb;
        .content{
          width:150*$length;
          p{
            @include fontStyle(14,19,500,#2F2F2F,left);
            @extend %nowrap;
            @extend %cursorPointer;
            @extend %animate-transition;
            &:hover{
              color:#333;
            }
          }
          h6{
            margin-top:10*$length;
            @include fontStyle(12,16,500,#999999,left);
            @extend %nowrap;

          }
        }
        .follow1{
          @include fontStyle(14,19,500,#999999,center);
          @extend %animate-transition;
          @extend %cursorPointer;
          &:hover{
            color: #13ce66;}
        }
        .follow2{
          @include fontStyle(14,19,500,#13ce66,center);
          @extend %animate-transition;
          @extend %cursorPointer;
          &:hover{
            color:#e7faf0
          }


        }

      }
    }


  }
</style>
